/**
标题
 */

import React,{ Component } from 'react';
import {
Text,
View,
ScrollView,
Image,
Modal,
TouchableHighlight,
} from 'react-native'
import {styles}  from '../styles/listdetail';

export default class ConfigView extends Component{
	 constructor(props) {
	    super(props);
	    this.state = {modalVisible: false};
	  }
	  setModalVisible(visible) {
	    this.setState({modalVisible: visible});
	  }

	 render(){
		return (
		    <View style={[styles.container,styles.titleMargin]}>
				<Modal

		          animationType={"slide"}
		          transparent={false}
		          visible={this.state.modalVisible}
		          onRequestClose={() => {alert("Modal has been closed.")}}
		        >
		        <View style={{flex:1,}}>
		          <View>
		            <TouchableHighlight 

		            underlayColor='#00000000'
		            style={[styles.map,{flexDirection:'row',justifyContent:'flex-end'}]}
		         
		            onPress={() => {
		              this.setModalVisible(!this.state.modalVisible)
		            }}>
			            
			                <Image style={{width:25,height:25,}}
			                	source={require('../images/close.png')}
			                />
			           
		            </TouchableHighlight>
		            <View style={styles.map}>
		            	<Image style={styles.modalHeader}
		                	source={require('../images/house-1.png')}
		                />
		                <Text style={styles.modalTitle}>房源详情</Text>
		                <Text style={{textAlign:'center'}}>
			                <Text>实拍认证 · 真实房源&nbsp;&nbsp;
			                	<Image
			                	source={require('../images/score-1.png')}
			                />
			                &nbsp;4.7
			                </Text>
		                </Text>
	                </View>
	                <View style={styles.modalBj}>
		              <View style={styles.configWidth}>
		                <Text style={styles.configText}>16.6m²</Text>
		              </View>
		              <View style={[styles.configWidth,styles.configWidthEnd]}>
		                <Text style={styles.configText}>一室一厅</Text>
		              </View>
		              <View style={[styles.configWidth,styles.configWidthEnd]}>
		                <Text style={styles.configText}>2/7层</Text>
		              </View>
		              <View style={styles.configWidthEnd}>
		                <Text style={styles.configText}>南</Text>
		              </View>
		            </View>
		          </View>
		        </View>
		        </Modal>
		    
		    	<View style={styles.config}>
			    	<View style={{display:'flex',flexDirection:'row'}}>
		              <View style={styles.configWidth}>
		                <Text style={styles.configText}>16.6m²</Text>
		              </View>
		              <View style={[styles.configWidth,styles.configWidthEnd]}>
		                <Text style={styles.configText}>一室一厅</Text>
		              </View>
		              <View style={[styles.configWidth,styles.configWidthEnd]}>
		                <Text style={styles.configText}>2/7层</Text>
		              </View>
		              <View style={styles.configWidthEnd}>
		                <Text style={styles.configText}>南</Text>
		              </View>

		               <TouchableHighlight 
		               underlayColor='transparent'
		               style={{justifyContent:'flex-end', alignItems:'center',flexDirection:'row',flex:1}}
		               onPress={() => {this.setModalVisible(true)}}
		               >		          
     					<Image style={{width:15,height:15}}
		                	source={require('../images/y.png')}
		            	/>	       
			        </TouchableHighlight>
		            </View>
		           
		    	</View>
		    	

		    </View>
		)
	 }
	
};